<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <title>系统日志 - 废物回收管理系统</title>
    <th:block th:include="common/header :: header"/>
    <style>
        .log-type {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .log-type-login { background-color: #e6f7ff; color: #1890ff; }
        .log-type-operate { background-color: #f6ffed; color: #52c41a; }
        .log-type-error { background-color: #fff2f0; color: #ff4d4f; }
        .log-status-success { color: #52c41a; }
        .log-status-fail { color: #ff4d4f; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 标题 -->
        <div class="row mb-3">
            <div class="col">
                <h4>系统日志</h4>
            </div>
            <div class="col-auto">
                <button class="btn btn-danger" onclick="cleanLogs()">
                    <i class="fas fa-trash-alt"></i> 清空日志
                </button>
            </div>
        </div>

        <!-- 搜索表单 -->
        <div class="card mb-3">
            <div class="card-body">
                <form id="searchForm" onsubmit="return false;">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <input type="text" class="form-control" name="title" placeholder="日志标题">
                        </div>
                        <div class="col-md-2 mb-2">
                            <select class="form-control" name="type">
                                <option value="">所有类型</option>
                                <option value="LOGIN">登录日志</option>
                                <option value="OPERATE">操作日志</option>
                                <option value="ERROR">异常日志</option>
                            </select>
                        </div>
                        <div class="col-md-2 mb-2">
                            <input type="text" class="form-control" name="username" placeholder="操作用户">
                        </div>
                        <div class="col-md-2 mb-2">
                            <select class="form-control" name="status">
                                <option value="">所有状态</option>
                                <option value="1">成功</option>
                                <option value="0">失败</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button type="button" class="btn btn-primary" onclick="searchLogs()">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="resetSearch()">
                                <i class="fas fa-redo"></i> 重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 日志列表 -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th style="width: 50px;">
                                    <input type="checkbox" onclick="toggleSelection(this)">
                                </th>
                                <th>日志标题</th>
                                <th style="width: 100px;">日志类型</th>
                                <th style="width: 120px;">操作用户</th>
                                <th style="width: 150px;">操作IP</th>
                                <th style="width: 100px;">操作状态</th>
                                <th style="width: 180px;">操作时间</th>
                                <th style="width: 100px;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="logList">
                            <!-- 日志数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 加载日志列表
        function loadLogs() {
            const form = document.getElementById('searchForm');
            const formData = new FormData(form);
            const params = new URLSearchParams(formData);
            
            fetch('/log/search?' + params.toString())
                .then(response => response.json())
                .then(logs => {
                    const tbody = document.getElementById('logList');
                    tbody.innerHTML = '';
                    
                    logs.forEach(log => {
                        const tr = document.createElement('tr');
                        tr.innerHTML = `
                            <td><input type="checkbox" value="${log.id}"></td>
                            <td>${log.title}</td>
                            <td>
                                <span class="log-type log-type-${log.type.toLowerCase()}">
                                    ${getLogTypeName(log.type)}
                                </span>
                            </td>
                            <td>${log.username}</td>
                            <td>${log.operateIp}</td>
                            <td>
                                <span class="log-status-${log.status === 1 ? 'success' : 'fail'}">
                                    ${log.status === 1 ? '成功' : '失败'}
                                </span>
                            </td>
                            <td>${formatDateTime(log.operateTime)}</td>
                            <td>
                                <a href="/log/detail/${log.id}" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> 详情
                                </a>
                            </td>
                        `;
                        tbody.appendChild(tr);
                    });
                })
                .catch(error => {
                    showError('加载日志失败: ' + error.message);
                });
        }

        // 搜索日志
        function searchLogs() {
            loadLogs();
        }

        // 重置搜索
        function resetSearch() {
            document.getElementById('searchForm').reset();
            loadLogs();
        }

        // 清空日志
        function cleanLogs() {
            if (!confirm('确定要清空30天前的日志吗？此操作不可恢复！')) {
                return;
            }

            const date = new Date();
            date.setDate(date.getDate() - 30);
            
            fetch('/log/clean?time=' + formatDateTime(date), {
                method: 'DELETE'
            })
                .then(response => response.json())
                .then(count => {
                    showSuccess('成功清空 ' + count + ' 条日志');
                    loadLogs();
                })
                .catch(error => {
                    showError('清空日志失败: ' + error.message);
                });
        }

        // 切换全选
        function toggleSelection(checkbox) {
            const checkboxes = document.querySelectorAll('#logList input[type="checkbox"]');
            checkboxes.forEach(box => box.checked = checkbox.checked);
        }

        // 获取日志类型名称
        function getLogTypeName(type) {
            switch (type) {
                case 'LOGIN': return '登录日志';
                case 'OPERATE': return '操作日志';
                case 'ERROR': return '异常日志';
                default: return type;
            }
        }

        // 格式化日期时间
        function formatDateTime(datetime) {
            if (!datetime) return '';
            return new Date(datetime).toLocaleString();
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            loadLogs();
        });
    </script>
</body>
</html> 